.container {
    height: 95vh; /* 使容器占满视口高度，减去底部按钮的高度 */
    width: 100%; /* 使容器占满整个视口宽度 */
    display: flex;
    flex-direction: column;
    position: relative; /* 为绝对定位的按钮提供定位上下文 */
    background-color: #ffffff; /* 背景颜色 */
}

.header {
    display: flex;
    flex-direction: column; /* 垂直排列 */
    align-items: flex-start; /* 左对齐 */
}

.menu {
    width: 90%; /* 宽度 */
    margin: 0 auto; /* 居中 */
    display: flex;
    justify-content: flex-start; /* 将菜单项对齐到左边 */
    cursor: pointer; /* 添加手形光标 */
    gap: 20px; /* 菜单项之间的间距 */
    align-items: center; /* 垂直居中对齐 */
}

.menuItem {
    padding: 10px 15px; /* 添加内边距 */
    position: relative; /* 使伪元素相对于菜单项定位 */
}
.menuItem:hover {
    color: #007bff; /* 悬停时的颜色变化 */
}

.menuItem.active::after {
    content: '';
    position: absolute;
    left: 50%; /* 水平居中 */
    bottom: -5px; /* 距离文本底部的位置 */
    width: 100%; /* 与菜单项宽度一致 */
    height: 2px; /* 下划线的高度 */
    background-color: #007bff; /* 下划线颜色 */
    transform: translateX(-50%); /* 根据宽度进行水平居中 */
}

.returnButton {
    width: 120px;
    margin-left: auto;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    font-size: 16px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.returnButton:hover {
    background-color: #007bff;
    transform: translateY(-2px);
}

/* ----------------------------------------------------------------------------------------------- */
/* 大屏幕样式 */

.userInfoContainer {
    background: linear-gradient(145deg, #fafafa, #f0f0f0); /* 非常淡的渐变背景 */
    border-radius: 15px; /* 圆角 */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); /* 阴影效果 */
    padding: 20px; /* 内边距 */
    width: 90%; /* 宽度 */
    min-width: 500px; /* 宽度 */
    height: 450px;
    margin: 20px auto; /* 居中 */
    transition: transform 0.3s ease; /* 过渡效果 */
}

.userInfoContainer:hover {
    transform: scale(1.02); /* 悬停时放大 */
}

/*----------------------------------------------------------------------------------------------- */
/* 用户基本信息 */

.userBasicInfoContainer {
    background: #D4EFF9; /* 非常淡的渐变背景 */
    border-radius: 10px; /* 圆角效果 */
    display: flex; /* 使用flex布局 */
    padding: 5px; /* 内边距 */
    gap: 20px; /* 元素之间的间距 */
    align-items: center; /* 垂直居中 */
    justify-content: space-between; /* 子元素之间及与父容器边缘的空间平均分配 */
    margin-bottom: 5px; /* 底部间距 */
}


.basicInfo_avatar {
    width: 120px; /* 头像宽度 */
    height: 120px; /* 头像高度 */
    border-radius: 50%; /* 圆形头像 */
    border: 2px solid #007bff; /* 边框颜色 */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); /* 头像阴影 */
    margin-right: 15px; /* 右边距 */
}

.userBasicInfoContainer_center {
    display: flex; /* 使用flex来排列信息 */
    justify-content: flex-start; /* 子元素从左开始对齐 */
    flex-direction: column; /* 垂直排列信息 */
    width:25%;
}

.BasicInfo_userName {
    font-size: 1.5em; /* 字体大小 */
    font-weight: bold; /* 加粗 */
    color: #333; /* 字体颜色 */
}

.BasicInfo_level {
    font-size: 14px; /* 字体大小 */
    color: #ff6600; /* 等级显示为橙色 */
    margin-left: 15px; /* 左边距 */
}

.BasicInfo_userId{
    color: #555; /* 字体颜色 */
    font-size: 1em; /* 字体大小 */
}

.userBasicInfoContainer_right {
    display: flex;
    justify-content: flex-start; /* 子元素从左开始对齐 */
    flex-direction: column; /* 垂直排列信息 */
    width: 25%;
}

.BasicInfo_userRole {
    font-weight: bold; /* 加粗 */
    color: #007bff; /* 角色颜色 */
    margin-top: 5px; /* 上边距调整 */
}

.BasicInfo_userPoints {
    font-weight: bold; /* 加粗 */
    color: #28a745; /* 积分颜色 */
    margin-top: 10px; /* 上边距 */
}

.currentUser {
    display: flex; /* 使用flex布局 */
    align-items: flex-end; /* 垂直对齐底部 */
    gap: 40px; /* 设定用户名和ID之间的间距 */
}

.userDetails {
    flex-grow: 1; /* 用户信息部分自适应扩展 */
    display: flex; /* 使用flex布局 */
    flex-direction: column; /* 竖直方向排列 */
}

/* 按钮容器样式 */
.buttonContainer1 {
    margin-top: 3px; /* 顶部间距 */
    display: flex; /* 水平排列按钮 */
    justify-content: flex-start; /* 左对齐 */
    gap: 10px; /* 按钮之间的间距 */
}

.buttonDiv {
    display: flex;
}

.button {
    width: 120px; /* 定义按钮宽度为150px，可根据需要修改 */
}

/*----------------------------------------------------------------------------------------------- */
/* 用户资料信息 */

.userProfileInfoContainer {
    margin-top: 10px; /* 上边距 */
}

.userNickname_div, .userGender_div, .userAge_div, .userSignature_div {
    display: flex; /* 使用flex布局 */
    min-width: 300px; /* 设置宽度 */
    margin-bottom: 10px; /* 每个信息之间的间距 */
    padding: 10px; /* 内边距 */
    border-radius: 5px; /* 圆角 */
    align-items: center; /* 垂直居中对齐 */
}

.ProfileInfo_userNickname,
.ProfileInfo_userGender,
.ProfileInfo_userAge,
.ProfileInfo_userSignature {
    margin-left: 20px;
    min-width: 100px; /* 最小宽度 */
    height: 30px;
    display: block; /* 每个信息占一行 */
    color: #555; /* 字体颜色 */
    font-size: 1em; /* 字体大小 */
    text-align: left;
    line-height: 30px; /* 设置行高等于容器高度 */
}

.genderOptions {
    display: flex;
    gap: 10px; /* 选项之间的间距 */
    align-items: center;
}

.signatureTextArea {
    width: 300px; /* 文本框宽度 */
    height: 50px; /* 文本框高度 */
    border: 1px solid #ccc; /* 边框样式 */
    border-radius: 5px; /* 圆角 */
    resize: none; /* 禁止调整大小 */
}

.editInput {
    width: 100px; /* 输入框宽度 */
    height: 30px; /* 输入框高度 */
    border: 1px solid #ccc; /* 边框样式 */
    border-radius: 5px; /* 圆角 */
    padding: 5px; /* 内边距 */
}

.editIcon {
    width: 20px; /* 图标宽度 */
    height: 20px; /* 图标高度 */
    margin-left: 8px; /* 左边距 */
    cursor: pointer; /* 鼠标指针样式 */
    vertical-align: middle; /* 垂直对齐 */
    transition: transform 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
    color: #b2a0d6; /* 初始颜色 */
}

.editIcon:hover {
    color: #23153C; /* 悬停时颜色变深 */
    transform: scale(1.2); /* 放大图标 */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* 添加轻微阴影 */
}

.editIcon:active {
    transform: scale(1.1); /* 点击时稍微缩小放大效果 */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); /* 减轻阴影效果 */
}

/*------------------------------------------------------------------------------------- */
/* 账户设置 */

.accountSettingsContainer {
    padding: 30px;
    width: 90%;
    min-width: 500px;
    height: auto; /* 自适应高度 */
    margin: 40px auto; /* 居中 */
    background: #D4EFF9;
    border-radius: 15px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    color: white; /* 文字颜色改为白色 */
}

.errorMessageContainer {
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.errorMessage {
    color: #ff4d4d; /* 错误信息为红色 */
    text-align: center;
    font-weight: bold;
    font-size: 14px;
}

.settingsContainer {
    display: flex;
    flex-direction: column;
    gap: 30px; /* 每行之间的间隔 */
    background-color: white;
    border-radius: 10px;
    padding: 20px;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1);
}

.settingRow {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    border-radius: 5px;
    background-color: white;
    border: 2px solid #d4eff9; /* 添加明显的边框 */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 可选：轻微的阴影效果 */
    transition: border-color 0.3s ease, background-color 0.3s ease; /* 过渡效果 */

    /* 当鼠标悬停时，使边框更显眼 */
    &:hover {
        border-color: #a6cce5; /* 悬停时加深边框颜色 */
        background-color: #f7fbff; /* 背景颜色稍微变浅 */
    }
}

.settingContent {
    display: flex;
    flex-direction: column;
}

.settingTitle {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 5px;
    color: black;
}

.settingDescription {
    font-size: 14px;
    color: black; /* 描述的颜色 */
}

.button {
    padding: 10px 20px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    font-size: 16px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.button:hover {
    background-color: #007bee;
    transform: translateY(-2px);
}

/* -------------------------------------------------------------------------------------------------------- */
/* 弹窗样式 */
/* 模态框背景 */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色背景 */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 模态框内容 */
.modalContent {
    background-color: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    width: 90%;
    max-width: 400px; /* 控制最大宽度 */
    position: relative;
}

/* 标题 */
.modal h2 {
    margin-top: 0;
    font-size: 1.5em;
    color: #333;
}

/* 段落 */
.modal p {
    margin-bottom: 10px;
    color: #555;
}

/* 输入行 */
.modalRow {
    margin-bottom: 15px;
    display: flex;
    align-items: center; /* 垂直居中对齐 */
}

/* 输入框 */
.modalInput {
    width: 80%;
    padding: 10px;
    margin-top: 5px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    margin-left: auto; /* 添加这行 */
}

/* 验证码输入框 */
.modalInput_verificationCode {
    padding: 10px;
    flex-grow: 1; /* 让输入框占据剩余空间 */
    margin-right: 10px;
    margin-top: 5px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    float: left;
}

/* 获取验证码按钮 */
.modalButton_sendVerificationCode {
    margin-top: 5px;
    max-width: 100px;
    border: none;
    background-color: #007bff;
    color: white;
    border-radius: 4px;
    cursor: pointer;
    float: right;
    font-size: 14px;
}

.modalButton_sendVerificationCode.disabled {
    background-color: #ccc; /* 禁用时的背景色 */
    color: #666; /* 禁用时的文本颜色 */
    cursor: not-allowed; /* 更改鼠标指针形状 */
    opacity: 0.65; /* 减少透明度 */
}

.modal .modalRow button:hover {
    background-color: #0056b3;
}

/* 按钮组 */
.modalActions {
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
}

/* 确定按钮 */
.modalOkButton {
    background-color: #28a745;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 4px;
    cursor: pointer;
    margin-right: 10px;
}

.modalOkButton:hover {
    background-color: #218838;
}

/* 取消按钮 */
.modalCancelButton {
    background-color: #6c757d;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 4px;
    cursor: pointer;
}

.modalCancelButton:hover {
    background-color: #5a6268;
}
